<template>
  <div class="playerinformation">
    <el-form label-width="80px" class="searchform">
      <el-form-item label="标题:">
        <el-input v-model="searchTitle" placeholder="请输入标题"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="search()">查询</el-button>
    <el-button type="primary" @click="add">添加</el-button>

    <el-table
      :data="tableData"
      border
      fit
      stripe=""
      style="width: 100%"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column type="index" label="序号"> </el-table-column>
	  <el-table-column prop="id" label="编号" width="150px"> </el-table-column>
      <el-table-column prop="title" label="标题"> </el-table-column>
      <el-table-column prop="createDate" label="日期"> </el-table-column>
      <el-table-column prop="objects" label="对象"> </el-table-column>

      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small" @click="edit(scope.row)"
            >编辑</el-button
          >
          
		  <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right">
      <el-pagination
			background
			layout="prev, pager, next"
			@current-change="current_change"
			:total="total"
			:current-page.sync="currentPage">
			</el-pagination>
    </div>

    <el-dialog title="发送通知" :visible.sync="dialogFormVisible" width="430px">
	    <el-form :model="myForm" :rules="rules" ref="myForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="标题" prop="title">
				<el-input v-model="myForm.title"></el-input>
			</el-form-item>
			<el-form-item label="内容" prop="content">
				<el-input type="textarea" v-model="myForm.content"></el-input>
			</el-form-item>
			
			<!-- <el-form-item label="发送给部门">
				<el-switch v-model="value1"></el-switch>
				<el-input v-model="myForm.departmentId" placeholder="请填写部门编号" v-if="value1"></el-input>
			</el-form-item>
			<el-form-item label="发送给用户">
				<el-switch v-model="value2"></el-switch>
				<el-input v-model="myForm.phone" placeholder="请填写用户账号" v-if="value2"></el-input>
			</el-form-item> -->
			<el-form-item label="部门编号">
				<el-input v-model="myForm.departmentId"></el-input>
			</el-form-item>
			<el-form-item label="用户账号">
				<el-input v-model="myForm.phone"></el-input>
			</el-form-item>
			<div style="margin:1em 3em;color:red">
				不填写部门编号和用户账号将发送给全体用户
			</div>
			
			<el-form-item>
				<el-button type="primary" @click="submitAdd('myForm')">确认</el-button>
				<el-button @click="resetForm('myForm')">重置</el-button>
			</el-form-item>
		</el-form>
    </el-dialog>

    <el-dialog
      title="查看内容"
      :visible.sync="dialogVisible1"
      width="30%"
      :before-close="handleClose"
    >
      <p>
        {{ showContent }}
      </p>
      <!-- <span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
		</span> -->
    </el-dialog>

    <el-dialog title="修改通知" :visible.sync="dialogVisible2" width="500px">
	  <el-form :model="myForm" :rules="rules" ref="myForm" label-width="100px" class="demo-ruleForm">
		  	<el-form-item label="id" hidden>
				<el-input v-model="myForm.id"></el-input>
			</el-form-item>
			<el-form-item label="标题" prop="title">
				<el-input v-model="myForm.title"></el-input>
			</el-form-item>
			<el-form-item label="内容" prop="content">
				<el-input type="textarea" v-model="myForm.content"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('myForm')">确认</el-button>
				<el-button @click="resetForm('myForm')">重置</el-button>
			</el-form-item>
		</el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "NewsList",
  data() {
    return {
		//value1:false,
		//value2:false,
    //要查询的标题
    searchTitle:"",
    //添加和修改的表单
        myForm: {
          title: '',
          departmentId: '',
          phone: '',
          content: '',
		      id:''
        },
        //表单数据规则
        rules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请填写通知内容', trigger: 'blur' }
          ]
        },
        //列表数据
      tableData: [
        {
          id: 1,
          createDate: "2016-05-02",
          title: "标题",
          objects: "13711112222",
          content: "11111",
        },
        {
          id: 2,
          createDate: "2016-05-02",
          title: "标题",
          objects: "13711112222",
          content: "11111",
        },
        {
          id: 3,
          createDate: "2016-05-02",
          title: "标题",
          objects: "13711112222",
          content: "11111",
        },
        {
          id: 4,
          createDate: "2016-05-02",
          title: "标题",
          objects: "13711112222",
          content: "11111",
        },
        {
          id: 5,
          createDate: "2016-05-02",
          title: "标题",
          objects: "全体用户",
          content: "11111",
        },
      ],
      //控制弹出框
      dialogFormVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      //通知的内容
      showContent: "",
      //分页的页数和当前页
      total:10,
			currentPage:1,
    };
  },
  methods: {
    //点击删除
	  del(row) {
        this.$confirm('是否删除通知'+row.id, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post(this.$global.zuulIp+'/news/newsDel',{
              id:row.id
						})
						.then(response => {
							if(response.data){
								this.$message({
									type: 'success',
									message: '删除成功!'
								});
								this.newsPage(1)
							}else{
								this.$message.error('删除失败！');
							}
						})
						.catch(function (error) {
							console.log(error);
						});
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
    //查看
    handleClick(row) {
      console.log(row);
      this.dialogVisible1 = true;
      this.showContent = row.content;
    },
    search() {
      this.currentPage = 1
      this.newsPage(this.currentPage)
    },
    handleClose(done) {
      // this.$confirm('确认关闭？')
      // .then(_ => {
      // 	done();
      // })
      // .catch(_ => {});
      this.dialogVisible1 = false;
    },
    //点击添加，清空表单数据
    add(){
      this.dialogFormVisible = true
      this.myForm.title = ""
		this.myForm.content = ""
		this.myForm.departmentId = ""
		this.myForm.phone = ""
		this.myForm.id = ""
    },
    //点击编辑，回显数据到表单
	edit(row){
		
		this.dialogVisible2 = true
		this.myForm.title = row.title
		this.myForm.content = row.content
		this.myForm.departmentId = ""
		this.myForm.phone = ""
		this.myForm.id = row.id

	},
  //提交添加表单
      submitAdd(formName) {
		  console.log(this.myForm.title)
		  console.log(this.myForm.content)
      console.log('部门编号：'+this.myForm.departmentId,'手机：'+this.myForm.phone)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post(this.$global.zuulIp+'/news/newsAdd',{
							title:this.myForm.title,
              content:this.myForm.content,
              departmentId:this.myForm.departmentId,
              phone:this.myForm.phone
						})
						.then(response => {
							if(response.data){
								this.$message({
									type: 'success',
									message: '添加成功!'
								});
								this.dialogFormVisible = false
								this.newsPage(1)
							}else{
								this.$message.error('添加失败！');
							}
						})
						.catch(function (error) {
							console.log(error);
						});
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
  //提交修改表单
      submitForm(formName) {
		  console.log(this.myForm.id)
		  console.log(this.myForm.title)
		  console.log(this.myForm.content)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post(this.$global.zuulIp+'/news/newsEdit',{
							title:this.myForm.title,
              content:this.myForm.content,
              id:this.myForm.id
						})
						.then(response => {
							if(response.data){
								this.$message({
									type: 'success',
									message: '修改成功!'
								});
								this.dialogVisible2 = false
								this.newsPage(1)
							}else{
								this.$message.error('修改失败！');
							}
						})
						.catch(function (error) {
							console.log(error);
						});
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //重置表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
    //   this.myForm.title = ""
		// this.myForm.content = ""
		this.myForm.departmentId = ""
		this.myForm.phone = ""
      },
      //分页查询通知
      newsPage(pageNum){
        this.$axios.get(this.$global.zuulIp+'/news/newsPage', {params:{
          pageNum: pageNum,
			pageSize: 5,
			title:this.searchTitle
        }
		})
		.then(response => {
			console.log(response);
			this.total = response.data.pages * 10
			this.tableData = []
			let list = response.data.list
			for(let i = 0 ; i <list.length ; i ++){
				let data = list[i];
        let departmentId = data.departmentId
        let phone = data.phone
        let obj = '全体用户'
        if(departmentId != null){
          obj = departmentId
        }
        if(phone != null && phone != ''){
          obj = phone
        }
				let li = {
					id : data.id,
          createDate: data.date,
          title: data.title,
          objects: obj,
          content: data.content,
				};
				this.tableData.push(li);
			}
		})
		.catch(function (error) {
			console.log(error);
		});
      },
      //点击分页
      current_change(){
        this.newsPage(this.currentPage)
      }
  },
  mounted(){
    this.newsPage(1)
  }
};
</script>

<style scoped="scoped">
.searchform {
  display: flex;
  float: left;
}
.playerinformation .el-button {
  margin-left: 15px;
}
</style>
